<!--根组件,用来装所有的组件,比如登录或者admin后台-->


<template>
    <!-- 通常编写组件的html结构，注意vue2.0中一定要有一个根元素 -->
    <div class="accounttmpl">
        <el-row>
            <el-col :span="8" :offset="6">
                <el-form :model="form" :rules="rules" ref="form1">
                    <el-form-item label="账号" prop="uname">
                        <el-input v-model="form.uname"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="upwd">
                        <el-input v-model="form.upwd"></el-input>
                        </el-form-item>
                        <el-form-item label="">
                        <el-button type="success" @click="login('form1')">登录</el-button>
                        </el-form-item>
                </el-form>
            </el-col>
        </el-row>

    </div>
</template>

<script>
    // es6的export default{ 写法等同于 module.exports={
    export default {
        // es6的写法 data() 等同于es5的 data:function()
        data() {
            return {
                form: {
                    uname: '', //用户名
                    upwd: '', //密码
                },
                rules: {
                    uname: [{
                        required: true, // 必填
                        message: '请输入用户名',
                        trigger: 'blur' //失去焦点
                    }],
                    upwd: [{
                        required: true, // 必填
                        message: '请输入密码',
                        trigger: 'blur' //失去焦点
                    }]
                }
            }
        },
        mounted() {
            // 当dom元素生成完的时候,把背景颜色变成蓝色
            document.getElementsByTagName('body')[0].style.backgroundColor = '#0094ff';
        },
        beforeDestroy() {
            // 离开login.vue组件的时候,也就是销毁的时候,颜色变成白色
            document.getElementsByTagName('body')[0].style.backgroundColor = '#fff';
        },
        methods: {
            //点击登录的时候
            login(form1) {
                this.$refs[form1].validate((volid) => {
                    if (volid) { ///验证成功,为true
                        var url = '/admin/account/login';
                        this.$http.post(url, this.form).then(res => {
                            if (res.data.status == 1) {
                                this.$message.error(res.data.message);
                                return;
                            }
                            // 成功,跳转到admin 页面
                            this.$message.success(res.data.message.realname);
                            // 正常跳转(使用vue-router的编程式导航)
                            this.$router.push({
                                'name': 'goodslist'
                            })
                        })
                    } else {
                        return false;
                    }

                })

            }
        }
    }
</script>

<style>

</style>


<!--
<style></style>  中的样式是全局的
<style scoped></style> 中的样式是当前组件的

-->